<script setup lang="ts">

</script>

<template>
  <div class="bg-white">
    <!-- 导航栏 - 第一行 -->
    <header id="navbar"
            class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
      <div class="wty-container mx-auto px-4 py-3 flex items-center justify-between">
        <!-- Logo -->
        <a href="#" class="flex items-center gap-2">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center">
            <i class="fa fa-cube text-white text-xl"></i>
          </div>
<!--          <span class="text-3xl font-bold  from-primary to-blue-500 text-sky-600">绮梦数字创意</span>-->
          <span class="text-3xl font-bold  from-primary to-blue-500 text-sky-600">数研智码</span>
        </a>

        <!-- 导航菜单 - 桌面端 -->
        <!-- 导航菜单 - 桌面端 -->
        <nav class="hidden md:flex items-center gap-8">
            <router-link to="/" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors "  active-class="active-link" >首页</router-link>
            <router-link to="/study" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >个人服务</router-link>
            <router-link to="/study2" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >企业服务</router-link>
<!--            <router-link to="/study" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >学习中心</router-link>-->
            <router-link to="/tool_category" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >工具商城</router-link>
<!--            <router-link to="/creative_connection" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >创意对接</router-link>-->
            <router-link to="/about" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors"  active-class="active-link" >关于我们</router-link>

        </nav>

        <!-- 登录/注册按钮 -->
        <div class="flex items-center gap-4">
          <a href="#login"
             class="hidden md:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">登录</a>
          <a href="#register"
             class="px-4 py-2 bg-sky-400 text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">免费加入</a>

          <!-- 移动端菜单按钮 -->
          <button id="menuBtn" class="md:hidden text-dark text-xl">
            <i class="fa fa-bars"></i>
          </button>
        </div>
      </div>

      <!-- 移动端菜单 -->
    </header>


    <main>
      <!-- 核心区域：两列四区域布局 -->
      <router-view></router-view>

    </main>

    <!-- 页脚 -->
    <footer class="bg-dark bg-neutral-800 text-white py-12 ">
      <div class="wty-container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div>
            <div class="flex items-center gap-2 mb-4">
              <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                <i class="fa fa-cube text-primary text-xl"></i>
              </div>
              <span class="text-xl font-bold text-white">CodeCraft</span>
            </div>
            <p class="text-sm">
              以Python为核心的数字工具创意平台，连接技术与需求，让代码创造实用价值
            </p>
          </div>

          <div>
            <h4 class="text-white font-bold mb-4">技术领域</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="hover:text-white transition-colors">Python</a></li>
              <li><a href="#" class="hover:text-white transition-colors">Java</a></li>
              <li><a href="#" class="hover:text-white transition-colors">MySQL</a></li>
              <li><a href="#" class="hover:text-white transition-colors">Excel</a></li>
              <li><a href="#" class="hover:text-white transition-colors">前端开发</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-white font-bold mb-4">平台服务</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="hover:text-white transition-colors">学习中心</a></li>
              <li><a href="#" class="hover:text-white transition-colors">工具商城</a></li>
              <li><a href="#" class="hover:text-white transition-colors">创意对接</a></li>
              <li><a href="#" class="hover:text-white transition-colors">会员说明</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-white font-bold mb-4">联系我们</h4>
            <ul class="space-y-2 text-sm">
              <li class="flex items-center gap-2">
                <i class="fa fa-envelope"></i>
                <span>contact@codecraft.com</span>
              </li>
              <li class="flex items-center gap-2">
                <i class="fa fa-weixin"></i>
                <span>CodeCraft创意平台</span>
              </li>
            </ul>
            <div class="mt-4">
              <img src="https://picsum.photos/id/237/80/80" alt="微信公众号" class="w-20 h-20 rounded">
            </div>
          </div>
        </div>

        <div class="border-t border-white/10 pt-8 text-sm text-center">
          <p>© 2023 CodeCraft 版权所有 | 数字工具创意平台，让技术创造实用价值</p>
        </div>
      </div>
    </footer>


  </div>
</template>

<style scoped>
.active-link {
  color: #3b82f6; /* 蓝色 */
  @apply border-b-2
}
</style>